<!-- 柱状图 https://echarts.apache.org/examples/zh/editor.html?c=bar-simple -->

<template>
  <div class="chart-container">
    <div ref="chart" class="chart"></div>
  </div>
</template>
  
<script>
import * as echarts from "echarts";
export default {
  name: "BarChart",
  props: {
    list: {
      type: Array,
      required: true,
    },
    chartId: {
      type: String,
      required: true,
    },
    title: {
      type: String,
      required: true,
    },
  },
  mounted() {
    this.initChart();
  },
  watch: {
    list: {
      handler() {
        this.initChart();
      },
      deep: true,
    },
  },
  methods: {
    initChart() {
      // 初始化 echarts 实例 dark
      // var myChart = echarts.init(document.getElementById(this.chartId),  'dark');
      const chartDom = this.$refs.chart;
      const myChart = echarts.init(chartDom, "");

      const indicator = [
        { name: "投注性", name2: "A" },
        { name: "領導性", name2: "B" },
        { name: "冒險性", name2: "C" },
        { name: "迅速性", name2: "D" },
        { name: "活動性", name2: "E" },
        { name: "社交性", name2: "F" },
        { name: "思考性", name2: "G" },
        { name: "細緻性", name2: "H" },
        { name: "條理性", name2: "I" },
        { name: "穩定性", name2: "J" },
        { name: "意志力", name2: "a" },
        { name: "成就需求", name2: "b" },
        { name: "統御需求", name2: "c" },
        { name: "表現慾", name2: "d" },
        { name: "合群性", name2: "e" },
        { name: "親和需求", name2: "f" },
        { name: "喜新性", name2: "g" },
        { name: "批判性", name2: "h" },
        { name: "崇拜性", name2: "i" },
        { name: "受役性", name2: "j" }
      ];
      // 将传递过来的数据转换为 echarts 需要的格式
      const categories = this.list.map((item) => item.value);
      const chineseCategories = categories.map(category => {
        const indicatorItem = indicator.find(item => item.name2 === category);
        return indicatorItem.name;
      });
      const values = this.list.map((item) => item.total);

      // 绘制图表
      myChart.setOption({
        title: {
          text: this.title,
        },
        tooltip: {},
        xAxis: {
          type: "category",
          data: categories,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            type: "bar",
            data: values,
            showBackground: true,
            itemStyle: {
              // 修改柱子颜色为蓝色
              color: "#1890ff",
            },
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      });
    },
  },
};
</script>
  
<style lang="stylus" type="text/stylus" rel="stylesheet/stylus" scoped>
  .chart-container {
    // 允许图表容器根据需要自动调整大小，以均匀填充可用空间
    flex: 1;
    margin: 20px 10px 10px 0;
  }
  @media (max-width: 600px) {
    .chart-container {
      flex-basis: 100%;
    }
  }

  .chart {
    width: 375px;
    height: 400px;
    // display: inline-flex; // 或者使用 inline-flex inline-block
    // box-sizing: border-box; // 内边距和边框的尺寸会被包含在这个 with 的范围内, 默认 content-box
  }
  
  </style>
  